<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="content-language" content="zh-CN">
    <meta content="1 days" name="revisit-after" />
    <meta name="robots" content="all">
    <meta name="viewport" content="width=750, maximum-scale=1.0, user-scalable=no">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <meta content="false" id="twcClient" name="twcClient" />
    <meta http-equiv="Page-Enter" content="blendTrans(Duration=0.5)" />
    <meta http-equiv="Page-Exit" content="blendTrans(Duration=0.5)" />
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/coupon.css">
    <script src="js/common.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="js/swiper.min.js"></script>
    <title>我的券</title>
</head>

<body>
    <div class="coupon" id="coupon">
        <div class="swiper-container row1">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="list used" v-if="currentPage == 2">
                        <div class="item" @click.stop="showCodeqr">
                            <div class="left">
                                <div class="row1">
                                    爱仁医生
                                </div>
                                <div class="row2">
                                    亮度值兑换券
                                </div>
                            </div>
                            <div class="right">
                                1000
                                <span>点</span>
                                <div class="row1">用</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tips">
            <div class="row1">您的券已生成</div>
            <div class="row2">点击将弹出二维码</div>
        </div>
        <transition name="slide-fade">
            <div class="code" v-if="showCode" @touchmove.prevent @click.stop="closeCode">
                <img src="images/server.png" alt="">
            </div>
        </transition>
    </div>
    </div>
</body>

</html>
<script>
    var app4 = new Vue({
        el: '#coupon',
        
        data() {
            return {
                swiper: '',
                currentPage: 2,
                showCode: false,
                SetFun:''
            };
        },
        methods: {
            showCodeqr() {
                this.showCode = true;
            },
            setPage(current) {
                this.currentPage = current;
            },
            closeCode() {
                this.showCode = false;
            }
        },
        created() {

        },
        mounted() {
            var _self = this;
            this.SetFun = new window.SetFun();
            _self.SetFun.hideMenu();
            var swiper = new Swiper('.swiper-container', {
                autoplay: true,
                loop: false,
                prevButton: '.swiper-button-prev',
                nextButton: '.swiper-button-next',
            })
        },
    })
</script>